<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生成绩管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js"></script>

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            warning: '#FFAB00',
            danger: '#FF5252',
            neutral: {
              100: '#F3F4F6',
              200: '#E5E7EB',
              300: '#D1D5DB',
              400: '#9CA3AF',
              500: '#6B7280',
              600: '#4B5563',
              700: '#374151',
              800: '#1F2937',
              900: '#111827',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .table-shadow {
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
      }
    }
  </style>
</head>
<body class="bg-neutral-100 font-inter min-h-screen flex flex-col">
  <!-- 顶部导航 -->
  <header class="bg-white card-shadow sticky top-0 z-50">
    <div class="container mx-auto px-4 py-4 flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <i class="fa fa-graduation-cap text-primary text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold text-neutral-800">学生成绩管理系统</h1>
      </div>
      <div class="flex items-center space-x-4">
        <button id="add-student-btn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center transition-all duration-300 transform hover:scale-105 shadow-md">
          <i class="fa fa-plus mr-2"></i> 添加学生
        </button>
      </div>
    </div>
  </header>

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <!-- 筛选和排序 -->
    <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
      <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div class="flex flex-wrap gap-3">
          <div class="relative">
            <input type="text" id="search-input" placeholder="搜索学生..."
                  class="pl-10 pr-4 py-2 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-neutral-600">排序:</span>
            <select id="sort-select" class="px-3 py-2 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
              <option value="name-asc">姓名 (A-Z)</option>
              <option value="name-desc">姓名 (Z-A)</option>
              <option value="math-asc">数学 (低-高)</option>
              <option value="math-desc">数学 (高-低)</option>
              <option value="english-asc">英语 (低-高)</option>
              <option value="english-desc">英语 (高-低)</option>
              <option value="average-asc">平均分 (低-高)</option>
              <option value="average-desc">平均分 (高-低)</option>
            </select>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <span class="text-neutral-600">显示:</span>
          <div class="flex rounded-lg overflow-hidden border border-neutral-300">
            <button class="px-4 py-2 bg-primary text-white" data-page-size="10">10</button>
            <button class="px-4 py-2 bg-white text-neutral-700 hover:bg-neutral-100" data-page-size="20">20</button>
            <button class="px-4 py-2 bg-white text-neutral-700 hover:bg-neutral-100" data-page-size="50">50</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 成绩表格 -->
    <div class="bg-white rounded-xl overflow-hidden table-shadow">
      <div class="overflow-x-auto">
        <table class="w-full min-w-[600px]">
          <thead>
            <tr class="bg-neutral-50 border-b border-neutral-200">
              <th class="px-6 py-4 text-left text-sm font-medium text-neutral-500 uppercase tracking-wider">序号</th>
              <th class="px-6 py-4 text-left text-sm font-medium text-neutral-500 uppercase tracking-wider">姓名</th>
              <th class="px-6 py-4 text-left text-sm font-medium text-neutral-500 uppercase tracking-wider">数学</th>
              <th class="px-6 py-4 text-left text-sm font-medium text-neutral-500 uppercase tracking-wider">英语</th>
              <th class="px-6 py-4 text-left text-sm font-medium text-neutral-500 uppercase tracking-wider">平均分</th>
              <th class="px-6 py-4 text-right text-sm font-medium text-neutral-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody id="students-table-body" class="divide-y divide-neutral-200">
            <!-- 表格内容将通过JavaScript动态生成 -->
          </tbody>
        </table>
      </div>

      <!-- 空状态 -->
      <div id="empty-state" class="hidden py-16 text-center">
        <div class="mx-auto w-20 h-20 rounded-full bg-neutral-100 flex items-center justify-center mb-4">
          <i class="fa fa-user-circle-o text-neutral-400 text-4xl"></i>
        </div>
        <h3 class="text-lg font-medium text-neutral-700 mb-2">暂无学生数据</h3>
        <p class="text-neutral-500 max-w-md mx-auto">点击上方"添加学生"按钮开始创建您的第一个学生记录</p>
      </div>

      <!-- 加载状态 -->
      <div id="loading-state" class="hidden py-16 text-center">
        <div class="mx-auto w-12 h-12 border-4 border-neutral-200 border-t-primary rounded-full animate-spin mb-4"></div>
        <p class="text-neutral-500">加载中...</p>
      </div>

      <!-- 分页 -->
      <div id="pagination" class="px-6 py-4 flex items-center justify-between border-t border-neutral-200">
        <div class="text-sm text-neutral-500">
          显示 <span id="start-index">1</span> 到 <span id="end-index">10</span> 条，共 <span id="total-count">2</span> 条记录
        </div>
        <div class="flex space-x-2">
          <button id="prev-page" class="px-3 py-1 rounded-lg border border-neutral-300 text-neutral-600 hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
            <i class="fa fa-chevron-left"></i>
          </button>
          <button id="next-page" class="px-3 py-1 rounded-lg border border-neutral-300 text-neutral-600 hover:bg-neutral-50 disabled:opacity-50 disabled:cursor-not-allowed">
            <i class="fa fa-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white py-4 border-t border-neutral-200">
    <div class="container mx-auto px-4 text-center text-neutral-500 text-sm">
      <p>© 2023 学生成绩管理系统 | 版权所有</p>
    </div>
  </footer>

  <!-- 添加/编辑学生模态框 -->
  <div id="student-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl w-full max-w-md mx-4 card-shadow transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-bold text-neutral-800" id="modal-title">添加学生</h3>
          <button id="close-modal" class="text-neutral-400 hover:text-neutral-600">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>

        <form id="student-form" class="space-y-4">
          <input type="hidden" id="student-id">

          <div class="space-y-2">
            <label for="student-name" class="block text-sm font-medium text-neutral-700">姓名</label>
            <input type="text" id="student-name" class="w-full px-4 py-2 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="请输入学生姓名">
            <p id="name-error" class="text-danger text-sm hidden">请输入学生姓名</p>
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div class="space-y-2">
              <label for="student-math" class="block text-sm font-medium text-neutral-700">数学成绩</label>
              <input type="number" id="student-math" class="w-full px-4 py-2 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="0-100" min="0" max="100">
              <p id="math-error" class="text-danger text-sm hidden">请输入0-100之间的数字</p>
            </div>

            <div class="space-y-2">
              <label for="student-english" class="block text-sm font-medium text-neutral-700">英语成绩</label>
              <input type="number" id="student-english" class="w-full px-4 py-2 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="0-100" min="0" max="100">
              <p id="english-error" class="text-danger text-sm hidden">请输入0-100之间的数字</p>
            </div>
          </div>

          <div class="pt-4 flex justify-end space-x-3">
            <button type="button" id="cancel-form" class="px-4 py-2 rounded-lg border border-neutral-300 text-neutral-700 hover:bg-neutral-50 transition-all">
              取消
            </button>
            <button type="submit" class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white transition-all">
              保存
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 学生详情模态框 -->
  <div id="detail-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl w-full max-w-md mx-4 card-shadow transform transition-all duration-300 scale-95 opacity-0" id="detail-content">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-bold text-neutral-800" id="detail-title">学生详情</h3>
          <button id="close-detail-modal" class="text-neutral-400 hover:text-neutral-600">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>

        <div id="student-detail" class="space-y-4">
          <div class="flex items-center">
            <span class="w-24 text-neutral-600">ID:</span>
            <span id="detail-id" class="font-medium text-neutral-800"></span>
          </div>
          <div class="flex items-center">
            <span class="w-24 text-neutral-600">姓名:</span>
            <span id="detail-name" class="font-medium text-neutral-800"></span>
          </div>
          <div class="flex items-center">
            <span class="w-24 text-neutral-600">数学:</span>
            <span id="detail-math" class="font-medium text-neutral-800"></span>
          </div>
          <div class="flex items-center">
            <span class="w-24 text-neutral-600">英语:</span>
            <span id="detail-english" class="font-medium text-neutral-800"></span>
          </div>
          <div class="flex items-center">
            <span class="w-24 text-neutral-600">平均分:</span>
            <span id="detail-average" class="font-medium text-neutral-800"></span>
          </div>
          <div class="pt-4 flex justify-end">
            <button id="close-detail-btn" class="px-4 py-2 rounded-lg border border-neutral-300 text-neutral-700 hover:bg-neutral-50 transition-all">
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 确认删除模态框 -->
  <div id="confirm-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl w-full max-w-md mx-4 card-shadow transform transition-all duration-300 scale-95 opacity-0" id="confirm-content">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-bold text-neutral-800">确认删除</h3>
          <button id="close-confirm-modal" class="text-neutral-400 hover:text-neutral-600">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>

        <div class="mb-6">
          <p class="text-neutral-600">确定要删除学生 "<span id="confirm-student-name" class="font-medium text-neutral-800"></span>" 吗？</p>
          <p class="text-neutral-500 text-sm mt-2">此操作不可撤销</p>
        </div>

        <div class="pt-4 flex justify-end space-x-3">
          <button id="cancel-delete" class="px-4 py-2 rounded-lg border border-neutral-300 text-neutral-700 hover:bg-neutral-50 transition-all">
            取消
          </button>
          <button id="confirm-delete" class="px-4 py-2 rounded-lg bg-danger hover:bg-danger/90 text-white transition-all">
            删除
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 使用Vue 3创建应用
    const { createApp, ref, computed, watch, onMounted } = Vue;

    const app = createApp({
      setup() {
        // 数据
        const students = ref([
          { id: 1, name: "张三", math: 90, english: 85 },
          { id: 2, name: "李四", math: 78, english: 92 },
          { id: 3, name: "王五", math: 88, english: 87 },
          { id: 4, name: "赵六", math: 95, english: 76 },
          { id: 5, name: "钱七", math: 65, english: 83 },
          { id: 6, name: "孙八", math: 72, english: 79 },
          { id: 7, name: "周九", math: 80, english: 80 },
          { id: 8, name: "吴十", math: 85, english: 90 },
          { id: 9, name: "郑十一", math: 70, english: 75 },
          { id: 10, name: "王十二", math: 92, english: 88 },
          { id: 11, name: "陈十三", math: 86, english: 84 },
          { id: 12, name: "杨十四", math: 77, english: 81 },
          { id: 13, name: "黄十五", math: 83, english: 79 },
          { id: 14, name: "刘十六", math: 91, english: 86 },
          { id: 15, name: "孙十七", math: 68, english: 72 },
          { id: 16, name: "胡十八", math: 89, english: 91 },
          { id: 17, name: "朱十九", math: 73, english: 78 },
          { id: 18, name: "高二十", math: 84, english: 85 },
          { id: 19, name: "林二十一", math: 79, english: 82 },
          { id: 20, name: "何二十二", math: 87, english: 89 },
          { id: 21, name: "郭二十三", math: 69, english: 74 },
          { id: 22, name: "马二十四", math: 82, english: 83 },
          { id: 23, name: "罗二十五", math: 76, english: 80 },
          { id: 24, name: "梁二十六", math: 93, english: 94 },
          { id: 25, name: "宋二十七", math: 71, english: 77 },
          { id: 26, name: "唐二十八", math: 88, english: 87 },
          { id: 27, name: "许二十九", math: 75, english: 79 },
          { id: 28, name: "韩三十", math: 81, english: 84 },
          { id: 29, name: "冯三十一", math: 86, english: 88 },
          { id: 30, name: "邓三十二", math: 74, english: 76 },
          { id: 31, name: "曹三十三", math: 90, english: 92 },
          { id: 32, name: "彭三十四", math: 78, english: 80 },
          { id: 33, name: "曾三十五", math: 85, english: 86 },
          { id: 34, name: "萧三十六", math: 73, english: 75 },
          { id: 35, name: "田三十七", math: 89, english: 90 },
          { id: 36, name: "董三十八", math: 77, english: 79 },
          { id: 37, name: "袁三十九", math: 84, english: 83 },
          { id: 38, name: "潘四十", math: 79, english: 81 },
          { id: 39, name: "于四十一", math: 88, english: 87 },
          { id: 40, name: "蒋四十二", math: 76, english: 78 },
          { id: 41, name: "蔡四十三", math: 83, english: 85 },
          { id: 42, name: "余四十四", math: 72, english: 74 },
          { id: 43, name: "杜四十五", math: 87, english: 89 },
          { id: 44, name: "叶四十六", math: 75, english: 77 },
          { id: 45, name: "程四十七", math: 82, english: 84 },
          { id: 46, name: "苏四十八", math: 78, english: 80 },
          { id: 47, name: "魏四十九", math: 86, english: 88 },
          { id: 48, name: "吕五十", math: 74, english: 76 },
          { id: 49, name: "丁五十一", math: 89, english: 90 },
          { id: 50, name: "沈五十二", math: 77, english: 79 },
        ]);

        // 过滤后的学生列表
        const filteredStudents = computed(() => {
          const searchTerm = document.getElementById('search-input').value.toLowerCase();
          return students.value.filter(student =>
            student.name.toLowerCase().includes(searchTerm)
          );
        });

        // 排序后的学生列表
        const sortedStudents = computed(() => {
          const sortOption = document.getElementById('sort-select').value;
          const [field, order] = sortOption.split('-');

          return [...filteredStudents.value].sort((a, b) => {
            let valueA, valueB;

            if (field === 'name') {
              valueA = a.name;
              valueB = b.name;
            } else if (field === 'math') {
              valueA = a.math;
              valueB = b.math;
            } else if (field === 'english') {
              valueA = a.english;
              valueB = b.english;
            } else if (field === 'average') {
              valueA = (a.math + a.english) / 2;
              valueB = (b.math + b.english) / 2;
            }

            if (valueA < valueB) return order === 'asc' ? -1 : 1;
            if (valueA > valueB) return order === 'asc' ? 1 : -1;
            return 0;
          });
        });

        // 分页
        const currentPage = ref(1);
        const pageSize = ref(10);

        // 可视区域的学生列表（用于虚拟滚动）
        const visibleStudents = computed(() => {
          const startIndex = (currentPage.value - 1) * pageSize.value;
          const endIndex = startIndex + pageSize.value;
          return sortedStudents.value.slice(startIndex, endIndex);
        });

        // 总页数
        const totalPages = computed(() => {
          return Math.ceil(sortedStudents.value.length / pageSize.value);
        });

        // 当前编辑的学生ID
        const currentStudentId = ref(null);

        // 表单验证错误
        const formErrors = ref({
          name: false,
          math: false,
          english: false
        });

        // 显示空状态
        const showEmptyState = computed(() => {
          return sortedStudents.value.length === 0;
        });

        // 显示加载状态
        const showLoadingState = ref(false);

        // 函数：添加学生
        const addStudent = (name, math, english) => {
          const newId = students.value.length > 0 ? Math.max(...students.value.map(s => s.id)) + 1 : 1;
          students.value.push({
            id: newId,
            name,
            math,
            english
          });
        };

        // 函数：更新学生
        const updateStudent = (id, name, math, english) => {
          const index = students.value.findIndex(student => student.id === id);
          if (index !== -1) {
            students.value[index] = {
              ...students.value[index],
              name,
              math,
              english
            };
          }
        };

        // 函数：删除学生
        const deleteStudent = (id) => {
          students.value = students.value.filter(student => student.id !== id);

          // 如果删除后当前页没有数据，跳转到上一页
          if (visibleStudents.value.length === 0 && currentPage.value > 1) {
            currentPage.value--;
          }
        };

        // 函数：计算平均分
        const calculateAverage = (student) => {
          return ((student.math + student.english) / 2).toFixed(1);
        };

        // 函数：打开添加学生模态框
        const openAddModal = () => {
          currentStudentId.value = null;
          document.getElementById('student-id').value = '';
          document.getElementById('student-name').value = '';
          document.getElementById('student-math').value = '';
          document.getElementById('student-english').value = '';
          document.getElementById('modal-title').textContent = '添加学生';

          // 重置错误信息
          formErrors.value = {
            name: false,
            math: false,
            english: false
          };
          document.querySelectorAll('.text-danger').forEach(el => el.classList.add('hidden'));

          // 显示模态框
          document.getElementById('student-modal').classList.remove('hidden');
          setTimeout(() => {
            document.getElementById('modal-content').classList.remove('scale-95', 'opacity-0');
            document.getElementById('modal-content').classList.add('scale-100', 'opacity-100');
          }, 10);

          // 自动聚焦到姓名输入框
          document.getElementById('student-name').focus();
        };

        // 函数：打开编辑学生模态框
        const openEditModal = (id) => {
          const student = students.value.find(s => s.id === id);
          if (student) {
            currentStudentId.value = id;
            document.getElementById('student-id').value = student.id;
            document.getElementById('student-name').value = student.name;
            document.getElementById('student-math').value = student.math;
            document.getElementById('student-english').value = student.english;
            document.getElementById('modal-title').textContent = '编辑学生';

            // 重置错误信息
            formErrors.value = {
              name: false,
              math: false,
              english: false
            };
            document.querySelectorAll('.text-danger').forEach(el => el.classList.add('hidden'));

            // 显示模态框
            document.getElementById('student-modal').classList.remove('hidden');
            setTimeout(() => {
              document.getElementById('modal-content').classList.remove('scale-95', 'opacity-0');
              document.getElementById('modal-content').classList.add('scale-100', 'opacity-100');
            }, 10);

            // 自动聚焦到姓名输入框
            document.getElementById('student-name').focus();
          }
        };

        // 函数：打开详情模态框
        const openDetailModal = (id) => {
          const student = students.value.find(s => s.id === id);
          if (student) {
            document.getElementById('detail-id').textContent = student.id;
            document.getElementById('detail-name').textContent = student.name;
            document.getElementById('detail-math').textContent = student.math;
            document.getElementById('detail-english').textContent = student.english;
            document.getElementById('detail-average').textContent = calculateAverage(student);

            // 显示模态框
            document.getElementById('detail-modal').classList.remove('hidden');
            setTimeout(() => {
              document.getElementById('detail-content').classList.remove('scale-95', 'opacity-0');
              document.getElementById('detail-content').classList.add('scale-100', 'opacity-100');
            }, 10);
          }
        };

        // 函数：打开确认删除模态框
        const openConfirmModal = (id) => {
          const student = students.value.find(s => s.id === id);
          if (student) {
            currentStudentId.value = id;
            document.getElementById('confirm-student-name').textContent = student.name;

            // 显示模态框
            document.getElementById('confirm-modal').classList.remove('hidden');
            setTimeout(() => {
              document.getElementById('confirm-content').classList.remove('scale-95', 'opacity-0');
              document.getElementById('confirm-content').classList.add('scale-100', 'opacity-100');
            }, 10);
          }
        };

        // 函数：关闭模态框
        const closeModal = (modalId) => {
          const modalContent = document.getElementById(modalId === 'student' ? 'modal-content' :
                                            modalId === 'detail' ? 'detail-content' : 'confirm-content');
          modalContent.classList.remove('scale-100', 'opacity-100');
          modalContent.classList.add('scale-95', 'opacity-0');

          setTimeout(() => {
            document.getElementById(`${modalId}-modal`).classList.add('hidden');
          }, 300);
        };

        // 函数：验证表单
        const validateForm = () => {
          let isValid = true;

          const name = document.getElementById('student-name').value.trim();
          const math = document.getElementById('student-math').value;
          const english = document.getElementById('student-english').value;

          // 验证姓名
          if (!name) {
            formErrors.value.name = true;
            document.getElementById('name-error').classList.remove('hidden');
            isValid = false;
          } else {
            formErrors.value.name = false;
            document.getElementById('name-error').classList.add('hidden');
          }

          // 验证数学成绩
          if (!math || isNaN(math) || math < 0 || math > 100) {
            formErrors.value.math = true;
            document.getElementById('math-error').classList.remove('hidden');
            isValid = false;
          } else {
            formErrors.value.math = false;
            document.getElementById('math-error').classList.add('hidden');
          }

          // 验证英语成绩
          if (!english || isNaN(english) || english < 0 || english > 100) {
            formErrors.value.english = true;
            document.getElementById('english-error').classList.remove('hidden');
            isValid = false;
          } else {
            formErrors.value.english = false;
            document.getElementById('english-error').classList.add('hidden');
          }

          return isValid;
        };

        // 函数：处理表单提交
        const handleFormSubmit = (e) => {
          e.preventDefault();

          if (!validateForm()) {
            return;
          }

          const id = document.getElementById('student-id').value;
          const name = document.getElementById('student-name').value.trim();
          const math = parseFloat(document.getElementById('student-math').value);
          const english = parseFloat(document.getElementById('student-english').value);

          // 显示加载状态
          showLoadingState.value = true;

          // 模拟API请求延迟
          setTimeout(() => {
            if (id) {
              // 更新学生
              updateStudent(parseInt(id), name, math, english);
            } else {
              // 添加学生
              addStudent(name, math, english);
            }

            // 关闭模态框
            closeModal('student');

            // 隐藏加载状态
            showLoadingState.value = false;

            // 重置当前页为第一页
            currentPage.value = 1;

            // 显示成功提示
            showToast(id ? '学生信息已更新' : '学生已添加成功');
          }, 500);
        };

        // 函数：处理删除确认
        const handleDeleteConfirm = () => {
          if (currentStudentId.value !== null) {
            // 显示加载状态
            showLoadingState.value = true;

            // 模拟API请求延迟
            setTimeout(() => {
              // 删除学生
              deleteStudent(currentStudentId.value);

              // 关闭模态框
              closeModal('confirm');

              // 隐藏加载状态
              showLoadingState.value = false;

              // 显示成功提示
              showToast('学生已删除');
            }, 500);
          }
        };

        // 函数：显示提示信息
        const showToast = (message) => {
          // 创建toast元素
          const toast = document.createElement('div');
          toast.className = 'fixed bottom-4 right-4 bg-neutral-800 text-white px-4 py-3 rounded-lg shadow-lg z-50 transform translate-y-10 opacity-0 transition-all duration-300';
          toast.textContent = message;

          // 添加到页面
          document.body.appendChild(toast);

          // 显示toast
          setTimeout(() => {
            toast.classList.remove('translate-y-10', 'opacity-0');
            toast.classList.add('translate-y-0', 'opacity-100');
          }, 10);

          // 自动隐藏
          setTimeout(() => {
            toast.classList.remove('translate-y-0', 'opacity-100');
            toast.classList.add('translate-y-10', 'opacity-0');

            setTimeout(() => {
              document.body.removeChild(toast);
            }, 300);
          }, 3000);
        };

        // 函数：渲染表格
        const renderTable = () => {
          const tableBody = document.getElementById('students-table-body');
          tableBody.innerHTML = '';

          // 显示空状态或加载状态
          document.getElementById('empty-state').classList.toggle('hidden', !showEmptyState.value);
          document.getElementById('loading-state').classList.toggle('hidden', !showLoadingState.value);

          if (showEmptyState.value || showLoadingState.value) {
            return;
          }

          // 渲染可见学生
          visibleStudents.value.forEach((student, index) => {
            const row = document.createElement('tr');
            row.className = 'hover:bg-neutral-50 transition-colors';

            // 计算序号
            const serialNumber = (currentPage.value - 1) * pageSize.value + index + 1;

            // 平均分
            const average = calculateAverage(student);

            row.innerHTML = `
              <td class="px-6 py-4 whitespace-nowrap">${serialNumber}</td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center cursor-pointer" data-id="${student.id}">
                  <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                    <span class="text-primary font-medium">${student.name.charAt(0)}</span>
                  </div>
                  <span class="font-medium text-neutral-800">${student.name}</span>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 py-1 rounded-full ${student.math >= 90 ? 'bg-secondary/10 text-secondary' :
                                                       student.math >= 60 ? 'bg-warning/10 text-warning' :
                                                       'bg-danger/10 text-danger'}">
                  ${student.math}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 py-1 rounded-full ${student.english >= 90 ? 'bg-secondary/10 text-secondary' :
                                                          student.english >= 60 ? 'bg-warning/10 text-warning' :
                                                          'bg-danger/10 text-danger'}">
                  ${student.english}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="font-medium text-neutral-800">${average}</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <button class="text-primary hover:text-primary/80 mr-3" data-id="${student.id}" title="编辑">
                  <i class="fa fa-pencil"></i>
                </button>
                <button class="text-danger hover:text-danger/80" data-id="${student.id}" title="删除">
                  <i class="fa fa-trash"></i>
                </button>
              </td>
            `;

            tableBody.appendChild(row);
          });

          // 更新分页信息
          updatePagination();

          // 添加事件监听器
          document.querySelectorAll('[data-id]').forEach(el => {
            const id = parseInt(el.dataset.id);

            if (el.classList.contains('cursor-pointer')) {
              // 点击姓名查看详情
              el.addEventListener('click', () => openDetailModal(id));
            } else if (el.querySelector('.fa-pencil')) {
              // 点击编辑按钮
              el.addEventListener('click', () => openEditModal(id));
            } else if (el.querySelector('.fa-trash')) {
              // 点击删除按钮
              el.addEventListener('click', () => openConfirmModal(id));
            }
          });
        };

        // 函数：更新分页信息
        const updatePagination = () => {
          const pagination = document.getElementById('pagination');
          const totalCount = sortedStudents.value.length;

          if (totalCount === 0) {
            pagination.classList.add('hidden');
            return;
          }

          pagination.classList.remove('hidden');

          const startIndex = (currentPage.value - 1) * pageSize.value + 1;
          const endIndex = Math.min(startIndex + pageSize.value - 1, totalCount);

          document.getElementById('start-index').textContent = startIndex;
          document.getElementById('end-index').textContent = endIndex;
          document.getElementById('total-count').textContent = totalCount;

          // 更新分页按钮状态
          document.getElementById('prev-page').disabled = currentPage.value <= 1;
          document.getElementById('next-page').disabled = currentPage.value >= totalPages.value;
        };

        // 函数：跳转到上一页
        const goToPrevPage = () => {
          if (currentPage.value > 1) {
            currentPage.value--;
          }
        };

        // 函数：跳转到下一页
        const goToNextPage = () => {
          if (currentPage.value < totalPages.value) {
            currentPage.value++;
          }
        };

        // 函数：设置每页显示数量
        const setPageSize = (size) => {
          pageSize.value = parseInt(size);
          currentPage.value = 1; // 重置为第一页
        };

        // 监听变化
        watch([students, currentPage, pageSize], () => {
          renderTable();
        });

        // 页面加载时
        onMounted(() => {
          // 初始渲染
          renderTable();

          // 添加事件监听器
          document.getElementById('add-student-btn').addEventListener('click', openAddModal);
          document.getElementById('close-modal').addEventListener('click', () => closeModal('student'));
          document.getElementById('cancel-form').addEventListener('click', () => closeModal('student'));
          document.getElementById('student-form').addEventListener('submit', handleFormSubmit);
          document.getElementById('close-detail-modal').addEventListener('click', () => closeModal('detail'));
          document.getElementById('close-detail-btn').addEventListener('click', () => closeModal('detail'));
          document.getElementById('close-confirm-modal').addEventListener('click', () => closeModal('confirm'));
          document.getElementById('cancel-delete').addEventListener('click', () => closeModal('confirm'));
          document.getElementById('confirm-delete').addEventListener('click', handleDeleteConfirm);
          document.getElementById('prev-page').addEventListener('click', goToPrevPage);
          document.getElementById('next-page').addEventListener('click', goToNextPage);

          // 搜索输入框监听
          document.getElementById('search-input').addEventListener('input', () => {
            currentPage.value = 1; // 重置为第一页
          });

          // 排序选择监听
          document.getElementById('sort-select').addEventListener('change', () => {
            currentPage.value = 1; // 重置为第一页
          });

          // 每页显示数量按钮监听
          document.querySelectorAll('[data-page-size]').forEach(btn => {
            btn.addEventListener('click', () => {
              setPageSize(btn.dataset.pageSize);

              // 更新按钮样式
              document.querySelectorAll('[data-page-size]').forEach(b => {
                b.classList.remove('bg-primary', 'text-white');
                b.classList.add('bg-white', 'text-neutral-700', 'hover:bg-neutral-100');
              });
              btn.classList.remove('bg-white', 'text-neutral-700', 'hover:bg-neutral-100');
              btn.classList.add('bg-primary', 'text-white');
            });
          });

          // 表单输入验证
          document.getElementById('student-name').addEventListener('input', () => {
            if (formErrors.value.name) {
              formErrors.value.name = false;
              document.getElementById('name-error').classList.add('hidden');
            }
          });

          document.getElementById('student-math').addEventListener('input', () => {
            if (formErrors.value.math) {
              formErrors.value.math = false;
              document.getElementById('math-error').classList.add('hidden');
            }
          });

          document.getElementById('student-english').addEventListener('input', () => {
            if (formErrors.value.english) {
              formErrors.value.english = false;
              document.getElementById('english-error').classList.add('hidden');
            }
          });
        });

        return {
          // 数据
          students,
          filteredStudents,
          sortedStudents,
          visibleStudents,
          currentPage,
          pageSize,
          totalPages,
          currentStudentId,
          formErrors,
          showEmptyState,
          showLoadingState,

          // 函数
          addStudent,
          updateStudent,
          deleteStudent,
          calculateAverage,
          openAddModal,
          openEditModal,
          openDetailModal,
          openConfirmModal,
          closeModal,
          validateForm,
          handleFormSubmit,
          handleDeleteConfirm,
          showToast,
          renderTable,
          updatePagination,
          goToPrevPage,
          goToNextPage,
          setPageSize
        };
      }
    });

    // 挂载应用
    app.mount('body');
  </script>
</body>
</html>
